<script setup lang="ts">
import { OrderStatus } from '@/enum'
withDefaults(
  defineProps<{
    status?: OrderStatus
    countdown?: number
  }>(),
  { countdown: 0, status: OrderStatus.ConsultWait }
)
// 倒计时的时间转换 ---单位秒
/* const getTime = (time: number) => {
  let hh = Math.floor(time / 3600)
  let mm = Math.floor((time % 3600) / 60)
  let ss = ((time % 3600) % 60) % 60
  return hh + ':' + mm + ':' + ss
}
const countDownTime = (time: number) => {
  if (time) {
    setInterval(() => {
      time--
      getTime(time)
    }, 1000)
  }
} */
</script>

<template>
  <div class="room-header-page">
    <div class="wait" v-if="status === OrderStatus.ConsultWait">
      已通知医生尽快接诊，24小时内医生未回复将自动退款
    </div>
    <div class="chat" v-if="status === OrderStatus.ConsultChat">
      <span>咨询中</span>
      <span class="rest"
        >剩余时间：
        <van-count-down class="restTime" :time="countdown * 1000" />
        <!-- <span class="restTime">{{ countDownTime(countdown) }}</span> -->
      </span>
    </div>
    <div class="end" v-if="status === OrderStatus.ConsultComplete">
      <van-icon name="passed" color="#000" />
      <span>已结束</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.room-header-page {
  position: fixed;
  top: 46px;
  width: 100%;
  z-index: 999;
  > div {
    display: flex;
    align-items: center;
    height: 44px;
    background-color: #fff;
    font-size: 12px;
    &.wait {
      background-color: #eaf8f6;
      color: var(--cp-primary);
      justify-content: center;
    }
    &.chat {
      padding: 0 15px;
      justify-content: space-between;
      span:first-child {
        color: var(--cp-primary);
        font-weight: 600;
      }
      .rest {
        display: flex;
      }
      .restTime {
        font-weight: 600;
        color: #ec5558;
      }
    }
    &.end {
      padding-left: 15px;
      font-weight: 600;
      span {
        margin-left: 5px;
      }
    }
  }
}
</style>
